<template>
  <el-card class="valid-code-card" shadow="hover" @click="refreshCode" >
    <div class="code-container" style="display: flex; justify-content: center; align-items: center;">
      <span
          v-for="(item, index) in codeList"
          :key="index"
          :style="getStyle(item)"
          class="code-char"
      >
        {{ item.code }}
      </span>
    </div>
  </el-card>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  name: 'ValidCode',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const length = ref(4);
    const codeList = ref([]);

    const createdCode = () => {
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      const charsLen = chars.length;
      codeList.value = [];

      for (let i = 0; i < length.value; i++) {
        const rgb = [
          Math.round(Math.random() * 220),
          Math.round(Math.random() * 240),
          Math.round(Math.random() * 200)
        ];
        codeList.value.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)),
          color: `rgb(${rgb.join(',')})`,
          padding: `${Math.floor(Math.random() * 10)}px`,
          transform: `rotate(${Math.floor(Math.random() * 360)}deg)`
        });
      }

      // Emit the updated code value
      emit('update:modelValue', codeList.value.map(item => item.code).join(''));
    };

    const getStyle = (data) => {
      return {
        color: data.color,
        padding: data.padding,
        transform: data.transform,
        fontSize: '18px', // You can adjust the font size here
        margin: '0 5px' // Add some margin between characters for better visibility
      };
    };

    onMounted(() => {
      createdCode();
    });

    const refreshCode = () => {
      createdCode();
    };

    return {
      codeList,
      refreshCode,
      getStyle
    };
  }
});
</script>

<style scoped>
.valid-code-card {
  width: 50%;
  height: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.code-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.code-char {
  display: inline-block;
  transition: transform 0.3s ease;
}
</style>